import React, { useState, useRef } from "react";
import "./index.scss";
import { AiOutlineUser } from "react-icons/ai";

function Login() {

  // 用户名正则表达式
  const usernameReg = /^\w{4,10}$/;

  // 用来获取元素的属性值
  const getUsernameByInput = useRef();
  const getUsernameByDiv = useRef();

  const [status, setStatus] = useState({
    username: "",
    isNowStatus: "登录",
    isShowUserInfo: false,
    isShowModal: false,
    isShowErrorInfo: false,
  });

  // 判断是登录状态还是退出状态
  const handleLoginOrExit = () => {
    if (getUsernameByDiv.current.innerText === "登录") {
      console.log("我要登录");
      setStatus({
        username: "",
        isNowStatus: "登录",
        isShowUserInfo: false,
        isShowModal: true,
        isShowErrorInfo: false,
      });
    } else if (getUsernameByDiv.current.innerText === "退出") {
      // 退出后input的value值置为空
      getUsernameByInput.current.value = '';
      setStatus({
        username: "",
        isNowStatus: "登录",
        isShowUserInfo: false,
        isShowModal: false,
        isShowErrorInfo: false,
      });
      console.log("我要退出");
    }
    
  };

  // 判断是'取消' 或 '确认'按钮的点击事件
  const handleCancelOrConfirm = (id) => {
    if (id === 0) {
      setStatus({
        username: "",
        isNowStatus: "登录",
        isShowUserInfo: false,
        isShowModal: false,
        isShowErrorInfo: false,
      });
    } else if (id === 1) {
      // 获取到input输入框的value值
      if (usernameReg.test(getUsernameByInput.current.value)) {
        setStatus({
          username: getUsernameByInput.current.value,
          isNowStatus: "退出",
          isShowUserInfo: true,
          isShowModal: false,
          isShowErrorInfo: false,
        });
      } else {
        setStatus({
          username: '',
          isNowStatus: "登录",
          isShowUserInfo: false,
          isShowModal: true,
          isShowErrorInfo: true,
        });
      }
    }
  };

  // 输入框失去焦点触发
  const handleOnBlur = (e) => {
    if (!usernameReg.test(e.target.value)) {
      setStatus({
          username: '',
          isNowStatus: "登录",
          isShowUserInfo: false,
          isShowModal: true,
          isShowErrorInfo: true,
        });
    }
  };

  return (
    <div className="order-login">
      <div
        className="order-login-btn"
        ref={getUsernameByDiv}
        onClick={handleLoginOrExit}
      >
        {status.isNowStatus}
      </div>
      <div
        className={
          status.isShowUserInfo ? "order-login-show" : "order-login-hide"
        }
      >
        {status.username}
      </div>
      <div
        className={
          status.isShowUserInfo ? "order-login-show" : "order-login-hide"
        }
      >
        {/* 导入icon */}
        <AiOutlineUser className="icon" />
      </div>

      {/* 遮蔽层 */}
      <div
        className={
          status.isShowModal
            ? "order-login-modal order-login-show"
            : "order-login-modal order-login-hide"
        }
      >
        <div className="order-login-modal-content">
          <h5>登录</h5>
          <div className="order-login-modal-content-form">
            <input
              type="text"
              placeholder="请输入用户名"
              onBlur={handleOnBlur}
              ref={getUsernameByInput}
            />
          </div>
          <div className="order-login-modal-error">
            <span
              className={
                status.isShowErrorInfo
                  ? "order-login-modal-error-info order-login-show"
                  : "order-login-hide"
              }
            >
              用户名长度4~10，包含字母、数字、_、-
            </span>
          </div>

          <div className="order-login-modal-content-control">
            <button onClick={() => handleCancelOrConfirm(0)}>取消</button>
            <button onClick={() => handleCancelOrConfirm(1)}>确定</button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;
